import React, { useState, useEffect } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faDumbbell, faBars } from '@fortawesome/free-solid-svg-icons';
import './HeroSection.css'; // 共用原样式文件（也可单独拆分Navbar.css，这里简化用同一个）
import { useNavigate } from 'react-router-dom';
import { useSearchParams } from 'react-router-dom';
//逻辑已处理完毕
export default function NewNavbar(){
  // 1. 状态管理（仅保留导航相关状态）
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false); // 移动端菜单显隐
  const [navbarScrolled, setNavbarScrolled] = useState(false); // 导航栏滚动样式
  const navigate=useNavigate();
  const [SearchParams] = useSearchParams();
  const email = SearchParams.get('email');
  // 2. 滚动监听：控制导航栏背景变化
  useEffect(() => {
    const handleScroll = () => {
      // 滚动超过50px，添加深色背景；否则恢复透明
      setNavbarScrolled(window.scrollY > 50);
    };

    window.addEventListener('scroll', handleScroll);
    // 组件卸载时移除监听，避免内存泄漏
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // 3. 切换移动端菜单（点击汉堡按钮触发）目前未使用
  const toggleMobileMenu = () => {
    setMobileMenuOpen(!mobileMenuOpen);
  };

  return (
    <header 
      className={`navbar ${navbarScrolled ? 'navbar-scrolled' : ''}`}
    >
      <div className="container nav-container">
        {/* Logo 区域 */}
        <a href="#" className="logo">
          <FontAwesomeIcon icon={faDumbbell} className="logo-icon" />
          <span>Endurance</span>
        </a>

        {/* 桌面端导航（屏幕≥768px显示） */}
        <nav className="desktop-nav">
          <a href="#home" 
          className="nav-link"
          onClick={(e) => {
            e.preventDefault(); // 阻止默认锚点跳转行为
                 navigate(`/HeroSection?email=${email}`);
             }}
          >首页</a>
          <a href="#contact"
           className="btn primary-btn"  
           onClick={(e) => {
            e.preventDefault(); // 阻止默认锚点跳转行为
              navigate(`/FitnessHomepage?email=${email}`);
             }}>个人首页</a>
        </nav>

        {/* 移动端菜单按钮（屏幕<768px显示） */}
        <button 
          className="mobile-menu-btn"
          onClick={toggleMobileMenu}
        >
          <FontAwesomeIcon icon={faBars} />
        </button>
      </div>

      {/* 移动端导航菜单（默认隐藏，点击按钮后显示） */}
      <div 
        className={`mobile-menu ${mobileMenuOpen ? 'mobile-menu-open' : ''}`}
      >
        <div className="mobile-menu-content">
          {/* 点击导航项后自动关闭菜单（优化移动端体验） */}
          <a href="#home" className="mobile-nav-link" onClick={toggleMobileMenu}>首页</a>
          <a href="#contact" className="btn primary-btn mobile-btn">个人首页</a>
        </div>
      </div>
    </header>
  );
};

